<template>
  <view class="keyWord">
    <view class="title">热门搜索</view>
    <view class="tag-list">
      <view class="" @click="clickTagHandler({title:'ce'})">ce</view>
      <view v-for="item in hotList" :key="item.courseId" @click="clickTagHandler(item)">{{item.title}}</view>
    </view>
    
    <view class="title space-between">
      <text>历史搜索</text>
      <text @click="clearHistory">清空</text>
    </view>
    <view class="tag-list">
      <view v-for="(item,index) in historyList" :key="index" @click="clickTagHandler(item)">{{item}}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { reactive,ref,onMounted ,getCurrentInstance} from "vue"
  import api from '@/api/search.js'
  const hotList = ref([])
  const historyList = ref([])
  const {proxy} = getCurrentInstance()
  // 本地搜索存储数据的key
  const key = "HISTORY_KEY"
    const emit = defineEmits(['doSearch','clickChange'])
  onMounted(() => {
    getHotList()
    getHistoryList()
  })
  
  // 获取热门搜索数据
  const getHotList = async () => {
    const {data} = await api.getHotList()
    hotList.value = data
  }
 
  // 获取本地历史搜索记录
  const getHistoryList = () => {
    
   historyList.value =  uni.getStorageSync(key)
  }
   
  // 清楚本地搜索历史记录
  const clearHistory = () =>{
    historyList.value = []
    uni.removeStorageSync(key)
  }
  

  
 // 点击热门搜索或者历史搜索，输入框回显对应的点击事件并搜索
  const clickTagHandler = (content) =>{
    emit('clickChange',content)
  }
  
  
</script>

<style lang="scss" scoped>
  .keyWord{
    padding: 25rpx;
    .title{
      font-size: 30rpx;
      color: #222;
      text:last-child {
        color: #999;
      }
    }
    .tag-list{
      display: flex;
      flex-wrap: wrap;
      margin-top: 20rpx;
      margin-bottom: 60rpx;
      view{
        font-size: 25rpx;
        color: #999;
        border: 1rpx solid #999;
        padding: 6rpx 15rpx;
        margin: 10rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        border-radius: 30rpx;
      }
    }
  }
</style>